/**
 * @author lulongwen
 * Date: 2023-08-30 22:38
 * Description: Database，数据库，圆柱形
 */

import { number, bool } from 'prop-types';

Database.propTypes = {
  width: number,
  height: number,
};
Database.defaultProps = {
  width: 32,
  height: 24,
  readOnly: false,
}

export function Database(props) {
  const { width, height, selected, readOnly } = props;

  const cx = width / 2;
  const ch = height-10;

  const path = [
    ['M0', 10], // M0,10
    ['L0', ch], // L0,70
    [`A${cx} 10 0 1 0 ${width} ${ch}`],
    [`L${width}`, 10], // L130,25
    [`A${cx} 10 0 1 1 0 10`],
    [`A${cx} 10 0 1 1 ${width} 10`],
    [`A${cx} 10 0 1 1 0 10`],
    ['z'],
  ]
    .map(item => item.join(','))
    .join(' ');

  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width={width}
      height={height}
      className={readOnly ? 'overflow-visible' : 'overflow-hidden'}
    >
      <path
        d={path}
        // d='M0,10  L0,70 A 50 10 0 1 0 100 70 L100,10 A 50 10 0 1 1 0 10 A50 10 0 1 1 100 10 A50 10 0 1 1 0 10 z'
        fill='#9ca8b3'
        strokeWidth={selected && readOnly ? 2 : 0}
        stroke='#fff'
      />
    </svg>
  );
}
